<template>
  <div class="container">
    <div class="wrap" style="padding-left:50px">
      <MyInput @parentExcel="parentExcel"></MyInput>
    </div>
    <div class="bottom" style="padding-left:50px; margin-top:50px">
      <Message :DrugList='DrugList' @initDrug="initDrug"></Message>
      <List></List>
      <AddDialog @addDrugFunction="addDrugFunction"></AddDialog>
    </div>
  </div>
</template>

<script>
import MyInput from "./components/myInput.vue";
import Message from "./components/message.vue";
import List from "./components/list.vue";
import AddDialog from './components/AddDialog.vue'
import {DrugDatilApi,addDrugApi} from "../../api/DrugDatil"
import { export_json_to_excel } from "../../utils/ExcelUtils";
export default {
  components: {
    MyInput,
    Message,
    List,
    AddDialog,
  },
  data(){
    return {
      DrugList:[],
    }
  },
  mounted(){
    this.initData();
  },
  methods:{
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    parentExcel(){
      // 导出表格
       const tHeader = [
        "序号",
        "编号",
        "药品名称",
        "药品规格",
        "单位",
        "单价",
      ];
      //自定义的字段
      const filterVal = [
        "id",
        "code",
        "name",
        "standards",
        "type",
        "price",
      ];
       const data = this.formatJson(filterVal, this.DrugList);
          export_json_to_excel({
            header: tHeader, //excel头部列表
            data, //数据
            filename: "测试文件", //文件名称
            autoWidth: true, //自适应宽
            bookType: "xlsx", //文件类型
          });
    },
    initDrug(){
      this.initData();
    },
    initData(){
      DrugDatilApi().then(res=>{
        console.log(res.data);
        this.DrugList = res.data;
      })
    },
    addDrugFunction(obj){
        addDrugApi(obj).then(res=>{
          console.log(res);
          if(res.code == 200){
             this.initData();
          }
        })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  background-color: #fff;
  .bottom{
    display: flex;
  }
}
</style>